<template>
  <div id="memorandumId">
    <div class="title">
      <span class="line"></span>
      <span>{{$t('wechat.beiwanglu')}}</span>
      <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="printPdf"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
    </div>
    <div class="mainBox">
        <div style="margin-bottom:10px;">
            <a-range-picker v-decorator="['range-picker', rangeConfig]" />
            <a-input-search :placeholder="$t('wechat.searckKey')" style="width: 200px;margin-bottom:10px;float:right;" @search="onSearch" />
        </div>
      <div class="item">
        <img
          width="40px"
          height="45px"
          src="../../../../assets/images/baseInfo/note.png"
          alt=""
        />
        <div class="details">
          <div class="titleDetails">
            <span
              class="fontSizeClass"
              style="
                display: inline-block;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >备忘录标题</span
            >
            <span style="margin-left: 100px">2022-02-15 10:55</span>
          </div>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容
          </div>
        </div>
        <div class="btn">
            <a-button @click="openModel">查看详情</a-button>
        </div>
      </div>
           <div class="item">
        <img
          width="40px"
          height="45px"
          src="../../../../assets/images/baseInfo/note.png"
          alt=""
        />
        <div class="details">
          <div class="titleDetails">
            <span
              class="fontSizeClass"
              style="
                display: inline-block;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >备忘录标题</span
            >
            <span style="margin-left: 100px">2022-02-15 10:55</span>
          </div>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容
          </div>
        </div>
        <div class="btn">
            <a-button @click="openModel">查看详情</a-button>
        </div>
      </div>     
      <div class="item">
        <img
          width="40px"
          height="45px"
          src="../../../../assets/images/baseInfo/note.png"
          alt=""
        />
        <div class="details">
          <div class="titleDetails">
            <span
              class="fontSizeClass"
              style="
                display: inline-block;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >备忘录标题</span
            >
            <span style="margin-left: 100px">2022-02-15 10:55</span>
          </div>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容备忘录内容
          </div>
        </div>
        <div class="btn">
            <a-button @click="openModel">查看详情</a-button>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="block">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
      </div>

    </div>
    <!-- 备忘录详情内容 -->
    <a-modal
      v-model="modal2Visible"
      :footer="null"
      title="备忘录标题"
      @ok="() => (modal2Visible = false)"
    >
      <p>备忘录标题内容一</p>
      <p>备忘录标题内容二</p>
      <p>备忘录标题内容三</p>
    </a-modal>
  </div>
</template>

<script>
import print from 'print-js'
import html2canvas from "html2canvas"
export default {
  name: "memorandum",
  data(){
      return{
          modal2Visible:false
      }
  },
  methods:{
    //打印
    printPdf(){
        html2canvas(document.getElementById('memorandumId')).then(function(canvas) {
                var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
                print(imgageData, 'image');
        });
    },
    openModel(){
        this.modal2Visible=true
    }
  }
};
</script>

<style scoped>

.block{
    text-align: center;
    margin: 10px 20px;
}
.fontSizeClass {
  font-size: 18px;
  font-weight: bold;
}
.titleDetails {
  display: flex;
  align-items: center;
}
.mainBox {
  padding: 0 20px;
}
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  border: 1px solid rgb(219, 219, 219);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 10px;
  border-radius: 5px;
  font-size: 13px;
  align-items: center;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 10px;
  font-size:0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}

.details {
  width: 636px;
  height: 60px;
  padding: 10px 10px;
}
.btn {
  width: 109px;
  height: 60px;
  display: flex;
  align-items: center;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .fontSizeClass {
    font-size: 0.07rem;
    font-weight: bold;
  }
  .titleDetails {
    display: flex;
    align-items: center;
  }
  .details {
    width: 2rem;
    height: 60px;
    padding: 6px;
  }
  .btn {
    width: 0.5rem;
    height: 60px;
    display: flex;
    align-items: center;
  }
}
</style>